<script setup lang="ts">
import { loadingBarInjectKey } from "./useLoadingBar";

const state = ref("hidden"),
  color = ref("bg-green-500");
const start = () => {
    state.value = "start-loading";
    color.value = "bg-green-500";
  },
  finish = () => {
    state.value = "end-loading";
    setTimeout(() => (state.value = "hidden"), 500);
  },
  error = () => {
    color.value = "bg-red-500";
    state.value = "error-loading";
    setTimeout(() => (state.value = "hidden"), 500);
  };
// 提供注入对象
provide(loadingBarInjectKey, { start, finish, error });
</script>
<template>
  <Teleport to="body">
    <div class="loading-bar">
      <div class="h-full w-[80%]" :class="[state, color]"></div>
    </div>
  </Teleport>
  <slot />
</template>
<style>
.loading-bar {
  z-index: 5999;
  position: absolute;
  top: 0;
  left: 0;
  height: 2px;
  width: 100%;
}
.start-loading {
  animation: loading-start 1.5s linear;
}
.end-loading {
  animation: loading-end 0.5s linear;
}
.error-loading {
  animation: loading-error 0.5s linear;
}
@keyframes loading-start {
  0% {
    width: 0%;
  }
  100% {
    width: 80%;
  }
}
@keyframes loading-end {
  0% {
    width: 80%;
  }
  100% {
    width: 100%;
  }
}
@keyframes loading-error {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}
</style>
